﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="js/v5.1.3-dist/ol.css" rel="stylesheet" type="text/css" />
    <script src="js/v5.1.3-dist/ol.js" type="text/javascript"></script>
    <link href="css/example.css" rel="stylesheet" />
    <script src="js/InitMap.js"></script>
    <script src="js/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var map = initMap();


            function bindInputs(layerid, layer) {
                var visibilityInput = $(layerid + ' input.visible');
                visibilityInput.bind('change', function () {
                    layer.setVisible(this.checked);
                });
                visibilityInput.attr('checked', layer.getVisible());

                var opacityInput = $(layerid + ' input.opacity');
                opacityInput.bind('input change', function () {
                    layer.setOpacity(parseFloat(this.value));
                });
                opacityInput.val(String(layer.getOpacity()));
            }
            map.getLayers().forEach(function (layer, i) {
                bindInputs('#layer' + i, layer);
                if (layer instanceof ol.layer.Group) {
                    layer.getLayers().forEach(function (sublayer, j) {
                        bindInputs('#layer' + i + j, sublayer);
                    });
                }
            });

            $('#layertree li > span').click(function () {
                $(this).siblings('fieldset').toggle();
            });
            $('#layertree li > span').siblings('fieldset').hide();
        }
    </script>
</head>
<body>
    <div id="layertree" style="background: #eeeff5 none repeat scroll 0 0; opacity: 0.9; z-index: 1003; position: absolute; right: 15px; top: 15px; width: 270px; ">
        <h5>
            点击下面的图层节点来改变他们的属性.
        </h5>
        <ul>
            <li>
                <span>天地图矢量图层</span>
                <fieldset id="layer0">
                    <label class="checkbox" for="visible0">
                        <input id="visible0" class="visible" type="checkbox" />visibility
                    </label>
                    <label>
                        opacity
                    </label>
                    <input class="opacity" type="range" min="0" max="1" step="0.01" />
                </fieldset>
            </li>
            <li>
                <span>Layer group</span>
                <fieldset id="layer1">
                    <label class="checkbox" for="visible1">
                        <input id="visible1" class="visible" type="checkbox" />visibility
                    </label>
                    <label>
                        opacity
                    </label>
                    <input class="opacity" type="range" min="0" max="1" step="0.01" />
                </fieldset>
            </li>
        </ul>
    </div>

    <div id="map">
    </div>
</body>
</html>
